﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>产品详情</title>
    <meta name="keywords" content="DeathGhost"/>
    <meta name="description" content="DeathGhost"/>
    <meta name="author" content="DeathGhost,deathghost@deathghost.cn">
    <link rel="icon" href="../images/icon/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <script src="../js/html5.js"></script>
    <script src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.cookie.js"></script>
    <script src="../js/vue.min.js"></script>
    <script>
        $(document).ready(function () {
            $("nav .indexAsideNav").hide();
            $("nav .category").mouseover(function () {
                $(".asideNav").slideDown();
            });
            $("nav .asideNav").mouseleave(function () {
                $(".asideNav").slideUp();
            });
            //detail tab
            $(".product_detail_btm .item_tab a").click(function () {
                var liindex = $(".product_detail_btm .item_tab a").index(this);
                $(this).addClass("curr_li").parent().siblings().find("a").removeClass("curr_li");
                $(".cont_wrap").eq(liindex).fadeIn(150).siblings(".cont_wrap").hide();
            });
            //radio
            $(".horizontal_attr label").click(function () {
                $(this).addClass("isTrue").siblings().removeClass("isTrue");
            });
        });
    </script>
</head>
<body>
<div id="productApp">
    <!--header-->
    <header>
        <!--topNavBg-->
        <div class="topNavBg">
            <div class="wrap">
                <!--topLeftNav-->
                <ul class="topLtNav">
                    <li><a href="login.html" class="obviousText">亲，请登录</a></li>
                    <li><a href="register.html">注册</a></li>
                    <li><a href="#">移动端</a></li>
                </ul>
                <!--topRightNav-->
                <ul class="topRtNav">
                    <li><a href="user.html">个人中心</a></li>
                    <li><a href="cart.html" class="cartIcon">购物车<i>0</i></a></li>
                    <li><a href="favorite.html" class="favorIcon">收藏夹</a></li>
                    <li><a href="user.html">商家中心</a></li>
                    <li><a href="article_read.html" class="srvIcon">客户服务</a></li>
                    <li><a href="union_login.html">联盟管理</a></li>
                </ul>
            </div>
        </div>
        <!--logoArea-->
        <div class="wrap logoSearch">
            <!--logo-->
            <div class="logo">
                <h1><img src="../images/logo.png"/></h1>
            </div>
            <!--search-->
            <div class="search">
                <ul class="switchNav">
                    <li class="active" id="chanpin">产品</li>
                    <li id="shangjia">商家</li>
                    <li id="zixun">搭配</li>
                    <li id="wenku">文库</li>
                </ul>
                <div class="searchBox">
                    <form>
                        <div class="inputWrap">
                            <input type="text" placeholder="输入产品关键词或货号" style="width: 620px;height: 34px;"/>
                        </div>
                        <div class="btnWrap">
                            <input type="submit" value="搜索"/>
                        </div>
                    </form>
                    <a href="#" class="advancedSearch">高级搜索</a>
                </div>
            </div>
        </div>
        <!--nav-->
        <nav>
            <ul class="wrap navList">
                <li class="category">
                    <a>全部产品分类</a>
                    <dl class="asideNav indexAsideNav">
                        <dt><a href="channel.html">女装</a></dt>
                        <dd>
                            <a href="#">夏装新</a>
                            <a href="#">连衣裙</a>
                            <a href="#">T恤</a>
                            <a href="#">衬衫</a>
                            <a href="#">裤子</a>
                            <a href="#">牛仔裤</a>
                            <a href="#">背带裤</a>
                            <a href="#">短外套</a>
                            <a href="#">时尚外套</a>
                            <a href="#">风衣</a>
                            <a href="#">毛衣</a>
                            <a href="#">背心</a>
                            <a href="#">吊带</a>
                            <a href="#">民族服装</a>
                        </dd>
                        <dt><a href="channel.html">男装</a></dt>
                        <dd>
                            <a href="#">衬衫</a>
                            <a href="#">背心</a>
                            <a href="#">西装</a>
                            <a href="#">POLO衫</a>
                            <a href="#">马夹</a>
                            <a href="#">皮衣</a>
                            <a href="#">毛衣</a>
                            <a href="#">针织衫</a>
                            <a href="#">牛仔裤</a>
                            <a href="#">外套</a>
                            <a href="#">夹克</a>
                            <a href="#">卫衣</a>
                            <a href="#">风衣</a>
                            <a href="#">民族风</a>
                            <a href="#">原创设计</a>
                            <a href="#">大码</a>
                            <a href="#">情侣装</a>
                            <a href="#">开衫</a>
                            <a href="#">运动裤</a>
                            <a href="#">工装裤</a>
                        </dd>
                    </dl>
                </li>
                <li>
                    <a href="homepage.html" class="active">首页</a>
                </li>
                <li>
                    <a href="#">时尚搭配</a>
                </li>
                <li>
                    <a href="channel.html">原创设计</a>
                </li>
                <li>
                    <a href="channel.html">时尚代购</a>
                </li>
                <li>
                    <a href="channel.html">民族风</a>
                </li>
                <li>
                    <a href="information.html">时尚搭配</a>
                </li>
                <li>
                    <a href="library.html">搭配知识</a>
                </li>
                <li>
                    <a href="#">促销专区</a>
                </li>
                <li>
                    <a href="#">其他</a>
                </li>
            </ul>
        </nav>

    </header>
    <script>
        $(document).ready(function () {
            //测试效果，程序对接如需变动重新编辑
            $(".switchNav li").click(function () {
                $(this).addClass("active").siblings().removeClass("active");
            });
            $("#chanpin").click(function () {
                $(".inputWrap input[type='text']").attr("placeholder", "输入产品关键词或货号");
            });
            $("#shangjia").click(function () {
                $(".inputWrap input[type='text']").attr("placeholder", "输入商家店铺名");
            });
            $("#zixun").click(function () {
                $(".inputWrap input[type='text']").attr("placeholder", "输入关键词查找文章内容");
            });
            $("#wenku").click(function () {
                $(".inputWrap input[type='text']").attr("placeholder", "输入关键词查找文库内容");
            });
        });

    </script>

    <!--导航指向-->
    <aside class="wrap insideLink">
        <a href="homepage.html">首页</a>
        <a href="product_list.html">时尚女装</a>
    </aside>
    <section class="wrap product_detail">
        <!--img:left-->
        <div class="gallery">
            <div class="panel panel-default">
                <div class="panel-body">
                    <img id="preImg" style="width: 400px;height: 400px;" :src="goods.cover"/>
                </div>
            </div>
            <br>
            <span><img style="width: 80px;height: 80px;" :src="goods.cover"
                       @click="preViewPicture(goods.cover)"/></span>
            <span v-for="item in pictures"><img style="width: 80px;height: 80px;" :src="item"
                                                @click="preViewPicture(item)"></span>
            <!--缩图结束-->
        </div>
        <!--text:right-->
        <div class="rt_infor">
            <!--lt_infor-->
            <div class="goods_infor">
                <h2>{{goods.name}}</h2>
                <ul>
                    <li>
                        <dl class="horizontal">
                            <dt>详情：</dt>
                            <dd>{{goods.description}}</dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="horizontal">
                            <dt>价格：</dt>
                            <dd><strong class="rmb_icon univalent">{{goods.price}}</strong>元</dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="horizontal">
                            <dt>时间：</dt>
                            <dd>
                                <time>{{goods.sellTime}}</time>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="horizontal">
                            <dt>运费：</dt>
                            <dd><em>{{goods.freight}}</time></em>
                        </dl>
                    </li>
                    <li class="statistics">
                        <dl class="vertical">
                            <dt>销量</dt>
                            <dd>{{goods.sales}}</dd>
                        </dl>
                        <dl class="vertical">
                            <dt>累计评论</dt>
                            <dd>0</dd>
                        </dl>
                        <dl class="vertical">
                            <dt>关注</dt>
                            <dd>0</dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="horizontal horizontal_attr">
                            <dt>规格：</dt>
                            <dd>
                                <select class="select" v-model="paramsIndex" @change="selectParam">
                                    <option value="-1">请选择颜色/尺码</option>
                                    <option v-for="(item,index) in params" :value="index">
                                        {{item.color}}/{{item.specification}}
                                    </option>
                                </select>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="horizontal horizontal_attr">
                            <dt>数量：</dt>
                            <dd>
                                <input type="button" value="-" class="jj_btn" @click="reduceCount"/>
                                <input type="text" :value="count" readonly class="num"/>
                                <input type="button" value="+" class="jj_btn" @click="addCount"/>
                                <span>{{stock}}</span>
                            </dd>
                        </dl>
                    </li>
                    <li class="last_li">
                        <input type="button" value="立即购买" class="buy_btn" @click="generateOrders"/>
                        <input type="button" value="加入购物车" class="add_btn" @click="addCart"/>
                        <input v-if="!isGoodsCollected" type="button" value="收藏商品" class="buy_btn"
                               @click="collectGoods"/>
                        <input v-else type="button" value="已收藏" class="add_btn" @click="cancelGoodsCollected"/>
                    </li>
                </ul>
            </div>
            <!--rt_infor-->
            <div class="shop_infor">
                <dl class="business_card">
                    <dd class="center"><img :src="store.picture" style="width: 40px;height: 40px;"></dd>
                    <dt>{{store.name}}</dt>
                    <dd>详情：{{store.description}}</dd>
                    <dd>销售量：{{store.salesVolume}}</dd>
                    <dd>地址：{{store.address}}</dd>
                    <dd class="center">
                        <a href="shop.html" class="link_btn" @click="viewStore">进入店铺</a>
                        <a v-if="!isStoreCollected" class="link_btn" @click="collectStore">收藏店铺</a>
                        <a v-else class="link_btn" class="add_btn" @click="cancelStoreCollected">已收藏</a>
                    </dd>
                </dl>
            </div>
        </div>
    </section>
    <!--detail-->
    <section class="wrap product_detail_btm">
        <article>
            <ul class="item_tab">
                <li><a class="curr_li">商品详情</a></li>
                <li><a>商品评价</a></li>
                <li><a>成交记录</a></li>
            </ul>
            <!--商品详情-->
            <div class="cont_wrap active">
                {{goods.description}}
            </div>
            <!--商品评价-->
            <div class="cont_wrap">
                <div v-for="(item,index) in pictureList">
                    <table class="table">
                        <tr>
                            <td width="20%" align="center">{{commentList[index].user}}：</td>
                            <td width="60%">{{commentList[index].content}}</td>
                            <td width="20%" align="center">
                                <time>{{commentList[index].time}}</time>
                            </td>
                        </tr>
                    </table>
                    <span><img v-for="(items) in item" :src="items" style="width: 80px;height: 80px"></span>
                </div>
                <!--分页-->
                <div class="paging" style="text-align:right">
                    <span>第{{page.currentPage}}/{{page.totalPage}}页</span>&nbsp;&nbsp;
                    <span>总记录数：{{page.totalCount}}&nbsp;&nbsp;每页显示:{{page.pageSize}}</span>&nbsp;&nbsp;
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li v-if="page.currentPage!==1">
                                <span @click="getComments(1)">首页</span>
                                <span @click="getComments(page.currentPage-1)" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                        </span>
                            </li>
                            <li v-else class="disabled">
                                <span>首页</span>
                                <span aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                        </span>
                            </li>
                            <li v-if="page.currentPage!==page.totalPage && page.totalPage!==0">
                                <span @click="getComments(page.currentPage+1)" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </span>
                                <span @click="getComments(page.totalPage)">尾页</span>
                            </li>
                            <li v-else class="disabled">
                                <span aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </span>
                                <span>尾页</span>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <!--成交记录-->
            <div class="cont_wrap">
                <table class="table">
                    <tr>
                        <th>买家</th>
                        <th>产品属性</th>
                        <th>数量</th>
                        <th>成交时间</th>
                    </tr>
                    <tr>
                        <td align="center">李**强</td>
                        <td>
                            <p>颜色：黑色
                            <p>
                            <p>规格：M
                            <p>
                        </td>
                        <td align="center"><b>1</b></td>
                        <td align="center">
                            <time>2013-01-13 15:25:39</time>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">李**强</td>
                        <td>
                            <p>颜色：黑色
                            <p>
                            <p>规格：L
                            <p>
                        </td>
                        <td align="center"><b>1</b></td>
                        <td align="center">
                            <time>2013-01-13 15:25:39</time>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">葛**华</td>
                        <td>
                            <p>颜色：白色
                            <p>
                            <p>规格：XL
                            <p>
                        </td>
                        <td align="center"><b>5</b></td>
                        <td align="center">
                            <time>2013-01-13 15:25:39</time>
                        </td>
                    </tr>
                </table>
                <!--分页-->
                <div class="paging">
                    <a>第一页</a>
                    <a class="active">2</a>
                    <a>3</a>
                    <a>...</a>
                    <a>89</a>
                    <a>最后一页</a>
                </div>
            </div>
        </article>
        <aside>
            <dl class="aside_pro_list">
                <dt>
                    <strong>精品推荐</strong>
                    <a>更多</a>
                </dt>
                <dd>
                    <a href="#" class="goods_img"><img src="../upload/goods002.jpg"/></a>
                    <div class="rt_infor">
                        <h3><a href="#">时尚女装 2019春季针织衫</a></h3>
                        <p>
                            <del class="rmb_icon">1298.00</del>
                        </p>
                        <p><strong class="rmb_icon">980.00</strong></p>
                    </div>
                </dd>
                <dd>
                    <a href="#" class="goods_img"><img src="../upload/goods002.jpg"/></a>
                    <div class="rt_infor">
                        <h3><a href="#">时尚女装 2019春季针织衫</a></h3>
                        <p>
                            <del class="rmb_icon">1298.00</del>
                        </p>
                        <p><strong class="rmb_icon">980.00</strong></p>
                    </div>
                </dd>
                <dd>
                    <a href="#" class="goods_img"><img src="../upload/goods002.jpg"/></a>
                    <div class="rt_infor">
                        <h3><a href="#">时尚女装 2019春季针织衫</a></h3>
                        <p>
                            <del class="rmb_icon">1298.00</del>
                        </p>
                        <p><strong class="rmb_icon">980.00</strong></p>
                    </div>
                </dd>
                <dd>
                    <a href="#" class="goods_img"><img src="../upload/goods002.jpg"/></a>
                    <div class="rt_infor">
                        <h3><a href="#">时尚女装 2019春季针织衫</a></h3>
                        <p>
                            <del class="rmb_icon">1298.00</del>
                        </p>
                        <p><strong class="rmb_icon">980.00</strong></p>
                    </div>
                </dd>
            </dl>
        </aside>
    </section>
</div>
<!--footer-->
<footer>
    <!--help-->
    <ul class="wrap help">
        <li>
            <dl>
                <dt>消费者保障</dt>
                <dd><a href="article_read.html">保障范围</a></dd>
                <dd><a href="article_read.html">退换货流程</a></dd>
                <dd><a href="article_read.html">服务中心</a></dd>
                <dd><a href="article_read.html">更多服务特色</a></dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>新手上路</dt>
                <dd><a href="article_read.html">保障范围</a></dd>
                <dd><a href="article_read.html">退换货流程</a></dd>
                <dd><a href="article_read.html">服务中心</a></dd>
                <dd><a href="article_read.html">更多服务特色</a></dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>付款方式</dt>
                <dd><a href="article_read.html">保障范围</a></dd>
                <dd><a href="article_read.html">退换货流程</a></dd>
                <dd><a href="article_read.html">服务中心</a></dd>
                <dd><a href="article_read.html">更多服务特色</a></dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>服务保障</dt>
                <dd><a href="article_read.html">保障范围</a></dd>
                <dd><a href="article_read.html">退换货流程</a></dd>
                <dd><a href="article_read.html">服务中心</a></dd>
                <dd><a href="article_read.html">更多服务特色</a></dd>
            </dl>
        </li>
    </ul>
    <dl class="wrap otherLink">
        <dt>友情链接</dt>
        <dd><a href="#" target="_blank">素材网站</a></dd>
        <dd><a href="#/pins/24448.html">HTML5模块化后台管理模板</a></dd>
        <dd><a href="#/pins/15966.html">绿色清爽后台管理系统模板</a></dd>
        <dd><a href="#/pins/14931.html">黑色的cms商城网站后台管理模板</a></dd>
        <dd><a href="http://www.bootstrapmb.com" target="_blank">前端博客</a></dd>
        <dd><a href="http://www.bootstrapmb.com" target="_blank">博客</a></dd>
        <dd><a href="http://www.bootstrapmb.com" target="_blank">新码笔记</a></dd>
        <dd><a href="http://www.bootstrapmb.com" target="_blank">DethGhost</a></dd>
        <dd><a href="#">当当</a></dd>
        <dd><a href="#">优酷</a></dd>
        <dd><a href="#">土豆</a></dd>
        <dd><a href="#">新浪</a></dd>
        <dd><a href="#">钉钉</a></dd>
        <dd><a href="#">支付宝</a></dd>
    </dl>
    <div class="wrap btmInfor">
        <p>© 2013 DeathGhost.cn 版权所有 网络文化经营许可证：浙网文[2013]***-027号 增值电信业务经营许可证：浙B2-200***24-1 信息网络传播视听节目许可证：1109***4号</p>
        <address>联系地址：陕西省西安市雁塔区XXX号</address>
    </div>
</footer>
</div>
<script type="text/javascript">
    new Vue({
        el: "#productApp",
        data: {
            goods: {},
            params: [],
            pictures: [],
            stock: 0,
            paramsIndex: "-1",
            count: 0,
            store: {},
            isStoreCollected: false,
            isGoodsCollected: false,
            commentList: [],
            page: {},
            pictureList: []
        },
        mounted: function () {
            this.initGoods();
            this.getAddress();
            this.getComments(1);
        },
        methods: {
            initGoods: function () {
                let _this = this;
                let dataModel = JSON.parse(window.sessionStorage.getItem("goods"));
                console.log(dataModel);
                this.goods = dataModel.goods;
                this.params = dataModel.parameterList;
                this.pictures = dataModel.pictureList;
                this.stock = dataModel.goods.stock;
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/StoreController/getStoreById",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        id: this.goods.store
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            _this.store = result.data.store;
                            _this.goodsIsCollected();
                            _this.storeIsCollected();
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                })
            },
            preViewPicture: function (src) {
                $("#preImg").attr("src", src);
            },
            addCount: function () {
                if (this.paramsIndex === "-1") {
                    alert("请选择规格");
                    return;
                }
                if (this.count === this.stock) {
                    return;
                }
                this.count = this.count + 1;
            },
            reduceCount: function () {
                if (this.paramsIndex === "-1") {
                    alert("请选择规格");
                    return;
                }
                if (this.count === 0) {
                    return;
                }
                this.count = this.count - 1;
            },
            selectParam: function () {
                if (this.paramsIndex === "-1") {
                    this.stock = this.goods.stock;
                } else {
                    this.stock = this.params[this.paramsIndex].stock;
                }
            },
            addCart: function () {
                if (this.paramsIndex === "-1") {
                    alert("请选择规格");
                    return;
                }
                if (this.count === 0) {
                    alert("请选择数量");
                    return;
                }
                let user = JSON.parse(window.sessionStorage.getItem("user"));
                let _this = this;
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/CartController/addCart",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        user: user.id,
                        goods: this.goods.id,
                        parameter: this.params[this.paramsIndex].id,
                        number: this.count
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            if (result.data.flag) {
                                alert("加入购物车成功");
                            } else {
                                alert("加入购物车失败");
                            }
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            storeIsCollected: function () {
                let _this = this;
                let user = JSON.parse(window.sessionStorage.getItem("user"));
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/StoreCollectionController/isStoreCollected",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        store: this.store.id,
                        user: user.id
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            _this.isStoreCollected = result.data.flag;
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            goodsIsCollected: function () {
                let _this = this;
                let user = JSON.parse(window.sessionStorage.getItem("user"));
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/GoodsCollectionController/isGoodsCollected",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        goods: this.goods.id,
                        user: user.id
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            _this.isGoodsCollected = result.data.flag;
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            collectGoods: function () {
                let _this = this;
                let user = JSON.parse(window.sessionStorage.getItem("user"));
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/GoodsCollectionController/addGoodsCollection",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        user: user.id,
                        goods: this.goods.id
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            if (result.data.flag) {
                                alert("收藏成功");
                            } else {
                                alert("收藏失败");
                            }
                            _this.isGoodsCollected = result.data.flag;
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            cancelGoodsCollected: function () {
                let _this = this;
                let user = JSON.parse(window.sessionStorage.getItem("user"));
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/GoodsCollectionController/deleteGoodsCollection",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        user: user.id,
                        goods: this.goods.id
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            if (result.data.flag) {
                                alert("取消收藏成功");
                            } else {
                                alert("取消收藏失败");
                            }
                            _this.isGoodsCollected = !result.data.flag;
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            collectStore: function () {
                let _this = this;
                let user = JSON.parse(window.sessionStorage.getItem("user"));
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/StoreCollectionController/addStoreCollection",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        user: user.id,
                        store: this.store.id
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            if (result.data.flag) {
                                alert("收藏成功");
                            } else {
                                alert("收藏失败");
                            }
                            _this.isStoreCollected = result.data.flag;
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                });
            },
            cancelStoreCollected: function () {
                let _this = this;
                let user = JSON.parse(window.sessionStorage.getItem("user"));
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/StoreCollectionController/deleteStoreCollection",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        user: user.id,
                        store: this.store.id
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            if (result.data.flag) {
                                alert("取消收藏成功");
                            } else {
                                alert("取消收藏失败");
                            }
                            _this.isStoreCollected = !result.data.flag;
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            viewStore: function () {
                let _this = this;
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/StoreController/getStoreById",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        id: this.store.id
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            window.sessionStorage.setItem("store", JSON.stringify(result.data.store));
                            window.location = "shop.html";
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            generateOrders: function () {
                if (this.paramsIndex === "-1") {
                    alert("请选择规格");
                    return;
                }
                if (this.count === 0) {
                    alert("请选择数量");
                    return;
                }
                let _this = this;
                let user = JSON.parse(window.sessionStorage.getItem("user"));
                let dataModel = {};
                let order = {};
                let orderDetails = {};
                let orderDetailsList = [];
                order.total = this.count * this.goods.price + this.goods.freight;
                order.address = this.address.id;
                order.store = this.goods.store;
                order.user = user.id;
                orderDetails.goods = this.goods.id;
                orderDetails.number = this.count;
                orderDetails.parameter = this.params[this.paramsIndex].id;
                orderDetailsList.push(orderDetails);
                dataModel.order = order;
                dataModel.orderDetailsList = orderDetailsList;
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/OrderController/addOrder",
                    type: 'post',
                    dataType: 'json',
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(dataModel),
                    success: function (result) {
                        if (result.code === 200) {
                            if (result.data.flag) {
                                window.location = "order_list.html";
                            } else {
                                alert("订单加载失败");
                            }
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });

            },
            getAddress: function () {
                let _this = this;
                let user = JSON.parse(window.sessionStorage.getItem("user"));
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/AddressController/getDefaultAddress",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        user: user.id
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            _this.address = result.data.address;
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            getComments: function (currentPage) {
                let _this = this;
                let store = JSON.parse(window.sessionStorage.getItem("store"));
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/CommentController/getGoodsComments",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        goods: this.goods.id,
                        currentPage: currentPage
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            _this.page = result.data.page;
                            _this.commentList = result.data.commentList;
                            _this.pictureList = result.data.pictureList;
                            console.log(_this.pictureList);
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            logout: function () {
                /**
                 * 注销，清空所有cookie(或者只清空保存着token的Cookie就行)
                 */
                let keys = document.cookie.match(/[^ =;]+(?=\=)/g);
                if (keys) {
                    for (let i = keys.length; i--;)
                        document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
                }
                //返回登录页面或者主页
                window.location.href = "login.html";
            }
        }
    })
</script>
</body>
</html>
